<template>
  <a-row type="flex" style="flex-flow: inherit;background-color: #fff;height: 100%;">
    <a-col :span="10" style="padding: 20px;border-right: 1px solid #ddd;">
      <h1 class="title" style="text-align: center;margin-bottom: 50px;">心理咨询申请</h1>
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="咨询人" prop="personId">
          <a-select v-model="form.personId" placeholder="请选择" @change="onSjskPersonChange">
            <a-select-option :value="item.sjskPersonId" v-for="(item, index) in sjskPersonList" :key="index"
              :identityCard="item.identityCard" :sjskType="item.sjskType" :phone="item.phone" :realName="item.realName">
              {{item.realName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="身份证号" prop="identification">
          <a-select v-model="form.identification" placeholder="请选择" :disabled="idcardFilter.length <= 1"
            @change="onIdcardChange">
            <a-select-option :value="item.identityCard" v-for="(item, index) in idcardFilter" :phone="item.phone"
              :key="index">
              {{item.identityCard}}
            </a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item label="人员类型">
          <j-dict-select-tag
            v-model="form.consultantType"
            dictCode="personTypeConsult"
             placeholder="请选择"
             disabled
            style="min-width: 100px"
          />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input v-model="form.phone" placeholder="" disabled />
        </a-form-model-item>
        <a-form-model-item label="咨询主题" prop="consultTopic">
          <a-input v-model="form.consultTopic" placeholder="" />
        </a-form-model-item>

        <a-form-model-item label="区域" prop="region">
          <a-cascader :options="areaOptions" placeholder="请选择" :load-data="loadCascader" changeOnSelect
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }" change-on-select @change="onAreaChange"
            v-model="form.region" />
        </a-form-model-item>
        <a-form-model-item label="机构" prop="mechanismId">
          <a-select v-model="form.mechanismId" placeholder="请选择" @change="onOrganizeChange">
            <a-select-option :value="item.id" v-for="(item, index) in lawerOrganize" :key="index"
              :organization="item.organization" :organizationName="item.organizationName">{{item.organizationName}}
            </a-select-option>

          </a-select>
        </a-form-model-item>
        <a-form-model-item label="机构地址">
          <a-input v-model="form.mechanismAddress" placeholder="" disabled />
        </a-form-model-item>
        <a-form-model-item label="心理咨询师" prop="psyTeacherId">
          <div class="carousel">
            <a-icon style="cursor: pointer;" type="left" @click="onLeft" />
            <div class="item-wrap">
              <div class="overflow-wrap" :style="{left: left + 'px'}">
                <div class="item" v-for="(item, index) in lawyerList" :class="{active: form.psyTeacherId === item.id}"
                  :key="index" @click="onLayerClick(item)">
                  <div>姓名：{{item.name}}</div>
                  <div>联系电话：{{item.telphone}}</div>
                  <div>擅长领域：{{setArea(item.businessArea)}}</div>
                </div>
              </div>

            </div>
            <a-icon style="cursor: pointer;" type="right" @click="onRight" />
          </div>
        </a-form-model-item>

        <a-form-model-item>
          <div style="text-align: center;padding-top: 50px;border-top: 1px solid #ddd;">
            <a-button style="margin-right: 20px;width: 140px;" @click="onCancel">
              取消
            </a-button>
            <a-button type="primary" style="margin-right: 20px;width: 140px;" @click="onSubmit">
              确定
            </a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-col>

  </a-row>
</template>

<script>
  import moment from 'moment'
  import {
    sjskPersonList,
  } from '@/api/sjsk/legalAid/consult'
  import { pageNewMech, viewMechTeacherList } from '@/api/sjsk/psycholog/organize/index.js'
  import {
    applicationPsychological
  } from '@/api/sjsk/psycholog/consult'
  import {
    getXzqhList,
    getXzqhByCode,
  } from '@/api/api'
  export default {
    components: {},
    computed: {

      idcardFilter: function() {
        const list = this.sjskPersonList.filter(item => {
          return item.realName === this.form.realName
        })

        return list
      }
    },
    data() {
      return {
        sjskPersonList: [],
        areaOptions: [],
        lawerOrganize: [],
        lawyerList: [],
        left: 0,
        form: {
          
          realName: '',
          
          "mechanismName": "",
          "psyTeacherAreas": "",
          "psyTeacherId": "",
          "psyTeacherPhone": "",
          "mechanismId": "",
          "consultantType": "",
          "consultantName": "",
          "identification": "",
          "mechanismAddress": "",
          "phone": "",
          "socialId": "",
          "psyTeacherName": "",
          "consultTopic": "",
          "personId": "",
          "region": []
        },
        rules: {
          personId: {
            required: true,
            type: 'number',
            message: '请选择',
            trigger: ['blur']
          },
          identification: {
            required: true,
            type: 'string',
            message: '请输入',
            trigger: ['blur']
          },
          consultantType: {
            required: true,
            type: 'number',
            message: '请输入',
            trigger: ['blur']
          },
          phone: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          consultTopic: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          region: {
            required: true,
            message: '请选择',
            trigger: ['blur']
          },
          mechanismId: {
            required: true,
            
            message: '请选择',
            trigger: ['blur']
          },
          psyTeacherId: {
            required: true,
            
            message: '请选择',
            trigger: ['blur']
          },
         
        },
        areaMap: {
          '1': '心理干预',
          '2': '婚姻挽救',
          '3': '抑郁症',
          '4': '人际关系障碍',
          '5': '亲子关系',
          '6': '失眠',
          '7': '焦虑'
        },
      }
    },
    created() {

      this.getXzqh()
    },
    async mounted() {
      this.getSjskPerson()
    },
    methods: {
      getSjskPerson() {
        sjskPersonList().then(res => {
          this.sjskPersonList = res.result
        })
      },
      setArea(str) {
        let list = str.split(',').map(item => {
          console.log(item)
          console.log(this.areaMap)
          return this.areaMap[item]
        })
        console.log(list)
        return list.toString()
      },
      onSjskPersonChange(val, option) {
        console.log(option)
        this.form.identification = option.data.attrs.identityCard
        this.form.consultantType = option.data.attrs.sjskType
        this.form.phone = option.data.attrs.phone
        this.form.consultantName = option.data.attrs.realName
      },
      onIdcardChange(val, option) {
        this.form.phone = option.data.attrs.phone 
      },
      getXzqh() {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            this.areaOptions = res.result.map(item => {
              item.isLeaf = false
              return item
            })
          }
        })
      },
      loadCascader(selectedOptions) {
        console.log(selectedOptions)
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        getXzqhList({
          level: targetOption.level + 1,
          parent: targetOption.code
        }).then(async (res) => {
          if (res.success) {
            targetOption.loading = false
            targetOption.children = res.result.map(item => {
              item.isLeaf = false
              return item
            })
            this.areaOptions = [...this.areaOptions];
            console.log(this.areaOptions)
          }
        })
      },
      onAreaChange(res) {
        console.log(res)
        this.getLawerOrganize(res[res.length - 1])
        this.form.mechanismId = ''
      },
      getLawerOrganize(departmentId) {
        pageNewMech({
          departmentId
        }).then(res => {
          const { success, result } = res
          if(success) {
            this.lawerOrganize = result
          }
        })
      },
      onOrganizeChange(val, option) {

        this.form.mechanismAddress = option.data.attrs.organization
        this.form.mechanismName = option.data.attrs.mechanismName
        this.getLawer(val)
        // areaName
      },
      getLawer(mechanismId) {
        viewMechTeacherList({
          mechanismId
        }).then(res => {
          
          const { success, result } = res
          if(success) {
            this.lawyerList = result.records
          }
        })
      },
      onLeft() {
        if (this.left + 120 > 0) {
          this.left = 0
        } else {
          this.left += 120
        }
      },
      onRight() {
        const lawyerListWidth = (this.lawyerList.length * 120) + (this.lawyerList.length * 10)
        console.log(lawyerListWidth)
        if (this.left * -1 > lawyerListWidth) {
          this.left = this.left
        } else {
          this.left -= 120
        }
      },
      onLayerClick(item) {
        this.form.psyTeacherId = item.id
        this.form.psyTeacherName = item.name
        this.form.psyTeacherPhone = item.telphone
        this.form.psyTeacherAreas = item.businessArea
        
      },

      onSubmit() {
        console.log(this.form)
        console.log(this.$refs.form)
        this.$refs.form.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          form.region = form.region.toString()
          applicationPsychological(form).then(res => {
            if (res.success) {
              this.$message.success('预约成功')
              setTimeout(() => {
                this.onCancel()
              }, 1500)
            } else {
              this.$message.error(res.message)
            }
          }).catch(err => {
            console.log(err)
          })
        })
      },

      onCancel() {
        this.$router.back()
      },
    }

  }
</script>
<style lang="less" scoped>
  .topBox /deep/.ant-row {
    margin-bottom: 0;
  }

  /deep/.ant-col-7 {
    width: 28%;
  }

  /deep/.ant-col-4 {
    width: 16%;
  }

  .carousel {
    display: flex;
    flex-flow: row;
    height: 120px;
    align-items: center;

    .item-wrap {
      flex: 1;
      overflow: hidden;
      margin: 0 20px;
      position: relative;
      height: 120px;

      .overflow-wrap {
        min-width: 400px;
        height: 120px;
        display: flex;
        position: absolute;
        top: 0;

        >div {
          margin-right: 10px;
          border: 1px solid #ddd;
          padding: 20px;
          border-radius: 4px;
          width: 270px;
          min-width: 270px;
          height: 120px;
          margin-bottom: 5px;
          cursor: pointer;
          line-height: 1;

          >div {
            margin-bottom: 10px;
          }
        }

        .active {
          border-color: rgba(24, 144, 255, 1);
          background-color: rgba(24, 144, 255, 0.047);
        }
      }

    }
  }
</style>
